<template>
  <div id="dormitoryMaster" style="margin-top: 20px">
    <div id="limit">
      姓名：
      <el-input class="magin-right" placeholder="请输入宿管名字关键字" v-model="name" clearable></el-input>
      楼栋名：
      <el-select class="magin-right" v-model="buildingId" clearable placeholder="请选择楼栋">
        <el-option
          v-for="gender in buildingIdOptions"
          :key="gender.id"
          :label="gender.name"
          :value="gender.id">
        </el-option>
      </el-select>
      <el-button type="primary" round @click="getDormitoryMaster">查询</el-button>
      <el-button type="success" round @click="addDormitoryMasterDialogVisible = true">新增</el-button>
    </div>
    <div id="table" class="magin-top">
      <el-table :data="dormitoryMasterList" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template slot-scope="scope">
            <span v-if="scope.row.gender===0">男</span>
            <span v-else-if="scope.row.gender===1">女</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="phone" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-row>
        <el-col :span="1" :offset="15">
          <el-pagination
            background
            :page-size="pageSize"
            :page-sizes="[5,10,15,20]"
            :current-page="pageNow"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div id="dialog">
      <dormitory-master-dialog :add-dormitory-master-dialog-visible="addDormitoryMasterDialogVisible" :dormitory-master-form="dormitoryMasterForm"></dormitory-master-dialog>
      <upd-dormitory-master-dialog :upd-dormitory-master-dialog-visible="updDormitoryMasterDialogVisible" :dormitory-master-form="dormitoryMasterForm"></upd-dormitory-master-dialog>
    </div>
  </div>
</template>

<script>
  import dormitoryMaster from "../../api/dormitory/dormitoryMaster";
  import building from "../../api/dormitory/building";
  import dormitoryMasterDialog from "./dormitoryMasterDialog";
  import UpdateDormitoryDialog from "../dormitory/updateDormitoryDialog";
  import UpdDormitoryMasterDialog from "./upddormitoryMasterDialog";
  export default {
    name: 'building',
    components: {UpdDormitoryMasterDialog, UpdateDormitoryDialog, dormitoryMasterDialog},
    data() {
      return {
        name: '',
        buildingId: '',
        pageSize: 5,
        pageNow: 1,
        total: 0,
        dormitoryMasterList: [],
        buildingIdOptions: [],
        dormitoryMasterForm:{},
        addDormitoryMasterDialogVisible:false,
        updDormitoryMasterDialogVisible:false
      }
    },
    created() {
      this.getDormitoryMaster()
      this.getBuildingOptions()
    },
    methods: {
      /*获取楼栋*/
      getBuildingOptions() {
        new Promise(((resolve, reject) => {
          building.getAllSimpleBuilding().then(res => {
            this.buildingIdOptions = res.data
            resolve()
          }).catch(e => {
            reject(e)
          })
        }))
      },
      /*获取宿管*/
      getDormitoryMaster() {
        let dormitoryMasterInfo = {
          pageNow: this.pageNow,
          pageSize: this.pageSize
        }
        if (this.buildingId) {
          this.$set(dormitoryMasterInfo, 'buildingId', this.buildingId)
        }
        if (this.name) {
          this.$set(dormitoryMasterInfo, 'name', this.name)
        }
        dormitoryMaster.getDormitoryMaster(dormitoryMasterInfo).then(res => {
          this.dormitoryMasterList = res.data
          this.total = res.total
        })
      },
      /*改变页面大小*/
      handlePageSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getDormitoryMaster()
      },
      /*改变当前页*/
      handlePageCurrentChange(pageNow) {
        this.pageNow = pageNow
        this.getDormitoryMaster()
      },
      /*编辑*/
      handleEdit(row) {
        this.dormitoryMasterForm.id = row.id
        this.dormitoryMasterForm.name = row.name
        this.dormitoryMasterForm.gender = row.gender
        this.dormitoryMasterForm.phone = row.phone
        this.updDormitoryMasterDialogVisible = true
      },
      /*删除*/
      handleDelete(id) {
        this.$confirm('确定删除该宿管么？删除后不可恢复', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          new Promise((resolve, reject) => {
            dormitoryMaster.delDormitoryMaster(id).then(() => {
              this.$message.success('删除成功')
              if (this.dormitoryMasterList.length === 1){
                this.pageNow = 1
              }
              this.getDormitoryMaster()
              resolve()
            }).catch(erro => {
              reject(erro)
            })
          })
        })
      },
      /*关闭dialog*/
      closeDialog() {
        this.dormitoryMasterForm = {}
        this.addDormitoryMasterDialogVisible = false
        this.updDormitoryMasterDialogVisible = false
      }
    }
  }
</script>

<style scoped>
  #limit {
    margin-left: 20px;
  }

  .magin-right {
    margin-right: 20px;
    width: 200px;
  }

  .magin-top {
    margin-top: 20px;
  }

  #table {
    margin-left: 20px;
  }
</style>
